Skip to main content

Color choice field

The Color Choice Field component is a versatile tool designed to allow users to select colors using various methods, providing flexibility and precision in color selection. This component is particularly useful for applications that require user input for design elements, such as customizing themes, selecting branding colors, or creating graphics. By using the Color Choice Field, businesses can enhance the user experience by offering multiple options for color selection, ensuring that users can choose the exact color they need for their specific use case. This component is ideal for applications where visual customization is key, providing a user-friendly interface for selecting and applying colors.

Properties​

To effectively utilize the Color Choice Field component, the following data and attributes are necessary:

  • Component-Level Attributes:
    • Code: A unique identifier for the Color Choice Field component, used for referencing and integration within larger systems or applications. This code is essential for enabling interactions and actions related to the component.
    • Label: The title displayed on the color choice field, providing context and clarity to the user about the purpose of the color selection.
  • Selection Options:
    • Color Gradient Visualization: Allows users to select a color from a visual gradient, providing an intuitive way to choose colors based on visual preference.
    • RGB Input: Enables users to specify colors using RGB values (0-255 for red, green, and blue), ideal for precise color matching and coding.
    • HSL Input: Allows users to define colors using HSL values (hue as a number, saturation and lightness as percentages), offering an alternative method for color specification.
    • HEX Input: Provides the option to enter hexadecimal values for colors, commonly used in web design and CSS for exact color representation.
    • Color Pipette: A tool that lets users select a color by clicking on a pixel anywhere on the screen, perfect for extracting exact colors from images or other visual elements.
  • Additional Attributes:
    • Mandatory Field: A setting that requires a color to be selected in the component (default is OFF). This ensures that a color choice is made before proceeding.
    • Help: Displays help information through an icon when hovered over (default is OFF), providing guidance and additional context for users.
    • Enabled: Determines whether the user can interact with the component (default is ON). If disabled, the component is fixed and not accessible for user interaction, maintaining a consistent color choice.

By structuring the Color Choice Field component with these attributes, businesses can create a flexible and user-friendly interface that effectively supports color selection and customization. The ability to choose colors through various methods ensures that the component remains a powerful tool for enhancing application design and user experience.

Style​

Best Practices​

  • User-Friendly Interface: Ensure the color choice field is intuitive and easy to use. Use clear labels and a color picker that allows users to easily select and preview colors.
  • Accessibility: Provide text labels or tooltips for color choices to assist users with visual impairments. Ensure sufficient contrast between text and background colors.
  • Consistency: Maintain a consistent style with other form elements in your application, such as using similar fonts, colors, and spacing.

Highest Value Features​

  • Color Picker Integration: A well-designed color picker enhances user experience by allowing users to select colors easily and accurately.
  • Font and Border Customization: Customizing fonts and borders for the color choice field can improve readability and visual appeal.
  • Responsive Design: Ensure the color choice field is responsive and adapts well to different screen sizes, enhancing usability across devices.

All the Settings​

Border​

  • Border Options: Customize the border style, width, and color to define the outline and separation of the color choice field.

Padding​

  • Padding Options
    • Icon: Adjust padding for all sides, top, left, bottom, right.
    • Size: Set in pixels using up and down arrows or by entering a numeric value.

Background​

  • Normal and On Hover Options:
    • Background Color:
      • Color: Color picker or enter values in HEX, RGBA, HSLA format.
    • Image: OR “select an image” from the media library OR “http” have it referred to an online image.
    • Background Attachment: Options include scroll, fixed, local, initial, inherit.
    • Background Position X/Y: Expressed in pixels (arrow up or down, or number), shift of the background regarding the X-axis (horizontal shift) and Y-axis (vertical shift).
    • Background Repeat: Options include repeat (horizontal and vertical), repeat-x (horizontal repeat), repeat-y (vertical repeat), no-repeat (based upon position one instance), initial (inherits the browser’s default), inherit (inherit from the parent element).
    • Background Size: Options include auto (autofit the size to the element), length, cover, contain, initial (inherits the browser’s default), inherit (inherit from the parent element).
    • Background Origin: Options include border-box, padding-box, content-box, initial (inherits the browser’s default), inherit (inherit from the parent element).

Label Font​

  • Design System: By default this follows the "Label medium" on the active design system.
  • Normal and On Hover Options:
    • Alignment: Options include left, center, right, aligned.
    • Font Type: Choose the font family.
    • Font Size: Number expressed in px, em, or rem (em and rem are relative units based on font size).
    • Letter Spacing: In pixels.
    • Line Height: In pixels.
    • Style: Options include normal, italic, oblique, initial (inherits the browser’s default), inherit (inherit from the parent element).
    • Weight: Options include thin, extra light, light, normal, medium, semi bold, bold, extra bold, black.
    • Color: Picker or values in HEX, RGBA, HSLA.
    • Stretch: Options include normal, semi condensed, condensed, extra condensed, ultra condensed, semi expanded, expanded, extra expanded, ultra expanded.
    • Variant: Options include normal, small caps, initial (inherits the browser’s default), inherit (inherit from the parent element).
    • Caps Variant: Options include normal, small caps, all small caps, mini caps, all mini caps, unicase, titling caps, initial (inherits the browser’s default), inherit (inherit from the parent element).

Answer Font​

  • Font Options: The font of the answer in the color choice field, with the same customization options as the label font.

Input Field Border​

  • Border Options: Customize the border or edge of the answer field element to define its outline and separation from other elements.
  • Design System: By default with on focus this follows the "Accent one" on the active design system.

Explanation of Terms​

  • Initial: Sets the property to its default value as defined in the CSS specification.
  • Inherit: Makes the element inherit the property from its parent element.
  • em/rem: Relative units based on the font size of the element or root element, respectively.

This style guide provides a comprehensive overview of the styling options available for the Color Choice Field component in NoCode-X, ensuring users can create visually appealing and functional designs.

Actions​

Event: On Change​

  • This action is executed whenever the color choice field value is changed by the user, whether through selecting a color from the picker or entering a value and exiting the focus.
  • It triggers actions or processes based on the new color selection, allowing for dynamic updates within the application.

Compatible functions​

  • Disable color input field
  • Set invalid message of color input field